<template>
  <div style="display: inline-flex">
    <el-upload
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
      :disabled="importDataDisabled"
      style="display: inline-flex;margin-right: 8px"
      action="/user/basic/import"
    >
      <el-button
        :disabled="importDataDisabled"
        type="success"
        :icon="importDataBtnIcon"
      >
        {{ importDataBtnText }}
      </el-button>
    </el-upload>
    <el-button
      type="success"
      icon="el-icon-download"
      @click="exportData"
    >
      导出数据
    </el-button>
  </div>
</template>

<script>
    export default {
        name: "DataLoad",
        props:{
            importDataBtnText:{
                type:String,
                default:'导入数据'
            }
        },
        data(){
            return {
                importDataBtnIcon: 'el-icon-upload2',
                importDataDisabled: false,
            }
        },
        methods: {
            onError(err, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
            },
            onSuccess(response, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
                this.initEmps();
            },
            beforeUpload() {
                this.importDataBtnText = '正在导入';
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataDisabled = true;
            },
            exportData() {
                window.open('./user/basic/export', '_parent');
            }
        }
    }
</script>

<style scoped>

</style>